<template>
  <view class="container">
    <view class="date-picker-container">
      <uni-datetime-picker
          type="date"
          :clear-icon="false"
          v-model="single"
          @change="change"
          class="custom-datetime-picker"
      />
      <my-button align="right" @click="refresh">重置</my-button>
    </view>

    <uni-table
        ref="table"
        :loading="loading"
        border stripe
        emptyText="暂无更多数据"
        class="custom-table"
    >
      <uni-tr class="table-header">
        <uni-th width="110rpx" align="center">序号</uni-th>
        <uni-th width="220rpx" align="center">项目</uni-th>
        <uni-th width="200rpx" align="center">内容</uni-th>
        <uni-th width="160rpx" align="center">金额</uni-th>
        <uni-th width="160rpx" align="center">收款方式</uni-th>
        <uni-th width="160rpx" align="center">收款方式金额</uni-th>
      </uni-tr>
      <uni-tr
          v-for="(item, index) in tableData"
          :key="index"
          class="table-row"
      >
        <uni-td align="center" class="row-index">{{ index + 1 }}</uni-td>
        <uni-td align="center" class="row-shop">{{ item.shopName }}</uni-td>
        <uni-td align="center" class="row-content">
          <view class="content-item today">今日营业额</view>
          <view class="content-item monthly">月度营业额</view>
        </uni-td>
        <uni-td align="center" class="row-amount">
          <view class="amount today">¥{{ formatAmount(item.todaySale) }}</view>
          <view class="amount monthly">¥{{ formatAmount(item.monthlySale) }}</view>
        </uni-td>
        <uni-td align="center" class="row-amount">
          <view class="content-item today">微信</view>
          <view class="content-item monthly">支付宝</view>
          <view class="content-item today">现金</view>
        </uni-td>
        <uni-td align="center" class="row-amount">
          <view class="amount today">¥{{ formatAmount(item.wxSale) }}</view>
          <view class="amount monthly">¥{{ formatAmount(item.zfbSale) }}</view>
          <view class="amount today">¥{{ formatAmount(item.cashSale) }}</view>
        </uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>
<script>
import UniTable from "../uni_modules/uni-table/components/uni-table/uni-table.vue";
import UniTr from "../uni_modules/uni-table/components/uni-tr/uni-tr.vue";
import UniTh from "../uni_modules/uni-table/components/uni-th/uni-th.vue";
import UniTd from "../uni_modules/uni-table/components/uni-td/uni-td.vue";
import {getAction} from "../utils/action";
import UniDatetimePicker
  from "../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
import MyButton from "../components/functional/button/myButton.vue";

export default {
  todaySale: "saleReport",
  components: {MyButton, UniDatetimePicker, UniTd, UniTh, UniTr, UniTable},
  data() {
    return {
      single: Date.now(),
      searchVal: '',
      tableData: [],
      loading: false,
      url: {
        index: "api/boss/turnover"
      },
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 搜索
    search() {
      this.getData(1, this.searchVal)
    },
    // 金额格式化方法
    formatAmount(value) {
      return Number(value).toFixed(2);
    },
    // 获取数据
    async getData(data) {
      this.loading = true
      let res = await getAction(this.url.index, {date: data})
      if (res.success) {
        this.tableData = res.result
      }
      this.loading = false
    },
    change(e) {
      this.getData(e)
    },
    /**
     * 刷新数据
     */
    refresh() {
      this.single = Date.now()
      this.getData()
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 20rpx 24rpx;
  background-color: #f8f9fa;
}

.date-picker-container {
  margin-bottom: 10rpx;
  border-radius: 12rpx;
  overflow: hidden;
  display: flex;
  text-align: center;

  .custom-datetime-picker {
    background: #fff;
    border-radius: 12rpx;
  }
}


.custom-table {
  border-radius: 12rpx !important;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

/* 新增全局单元格样式 */
.custom-table :deep .uni-table-td {
  display: flex;
  align-items: center; /* 关键：确保所有单元格内容垂直居中 */
  justify-content: center;
  min-height: 120rpx; /* 设置最小高度保持一致性 */
}

.table-header {
  background-color: #f0f7ff !important;

  :deep .uni-table-th {
    font-weight: 600;
    color: #1f2937;
    font-size: 20rpx;
  }
}

.table-row {
  :deep .uni-table-td {
    padding: 0;
    vertical-align: middle;
  }
}

.row-index {
  font-size: 28rpx;
  color: #6b7280;
}

.row-shop {
  font-weight: 500;
  font-size: 28rpx;
  color: #1f2937;
  max-width: 95%; /* 防止文本溢出 */
  line-height: 1.5; /* 更好的多行文本支持 */
  text-align: center;
}

.row-content, .row-amount {
  flex-direction: column;
  justify-content: center;

  > view {
    width: 100%;
    box-sizing: border-box;
  }

  .content-item, .amount {
    text-align: center;
  }

  .today {
    border-bottom: 1rpx solid #f0f0f0;
  }
}

.content-item {
  font-size: 22rpx;

  &.today {
    color: #10b981;
  }

  &.monthly {
    color: #3b82f6;
  }
}

.amount {
  font-family: 'Din Condensed', Arial, sans-serif;
  font-weight: bold;
  font-size: 32rpx;

  &.today {
    color: #10b981;
  }

  &.monthly {
    color: #3b82f6;
  }
}

/* 最后一行无底部边框 */
uni-tr:last-child uni-td > view {
  border-bottom: none !important;
}
</style>